<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />

    <style>
        html,
        body {
            height: 98%;
            background: transparent;
            -webkit-touch-callout: none;
            font-family: Tahoma, Geneva, sans-serif;
            font-style: normal;
        }

        #dialog {
            background-color: #fff;
            border-radius: .5rem .5rem 0 0;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            -webkit-transition: all .1s;
            transition: all .1s;
            -webkit-transform: scale(0);
            transform: scale(0);
            opacity: 0;
        }

        #dialog.in {
            -webkit-transform: scale(1);
            transform: scale(1);
            opacity: 1;
        }
        #dialog{
          width: 100%;
        }
        .imgs{
          padding:1.2rem 3.4rem
        }
        .share-img {}

        .img-item {
            flex-direction: column;
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="dialog" class="font-12 text-color-3">
            <div class="imgs flex-justify-between">
                <div class="flex-center img-item">
                    <img class='share-img img-50' src="../../image/common/vx.png" alt="">
                    <div>微信好友</div>
                </div>
                <div class="flex-center img-item" tapmode @click='shareModal'>
                    <img class='share-img img-50' src="../../image/common/haibao.png" alt="">
                    <div>生成海报</div>
                </div>
            </div>
            <div class="height-44" style="text-align:center" tapmode onclick="api.closeFrame()">
              取消
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.min.js"></script>
<script type="text/javascript " src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js "></script>

<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            payConfirm: function() {
                api.openFrame({
                    name: 'pay-modal',
                    url: './pay-modal.html',
                    bounces: true,
                    rect: {
                        x: 0,
                        y: 0,
                        w: api.winWidth,
                        h: api.winHeight
                    },
                    bgColor: 'rgba(0,0,0,0.6)',
                    bounces: false
                })

            },
            shareModal:function(){
              api.openFrame({
                  name: 'index-share-modal',
                  url: './index-share-modal.html',
                  bounces: true,
                  rect: {
                      x: 0,
                      y: 0,
                      w: api.winWidth,
                      h: api.winHeight
                  },
                  bgColor: 'rgba(0,0,0,0.6)',
                  bounces: false
              })
            }
        }

    });
    $api.addCls(dialog, 'in');
    apiready = function() {
        // $(document.body).on('touchend', function(e) {
        //     var dialog = $("#dialog")[0];
        //     if (!$.contains(dialog, e.target)) {
        //         $('#dialog').removeClass('in');
        //         setTimeout(function() {
        //             api.closeFrame();
        //         }, 200);
        //     }
        // });
    };
</script>


</html>
